<template>
	<view class="wapper">
		<view class="user-icon">
			<image src="../../static/icons/用户.png" mode=""></image>
		</view>
		<up-form labelPosition="left" :model="form" :rules="rules" ref="formRef">
			<up-form-item class="formItem" leftIcon="../../static/icons/手机.png" prop="phone"
				leftIconStyle="color:'#ffffff'" labelWidth="80rpx">
				<input type="text" v-model="form.phone" placeholder="请输入注册手机号" />
			</up-form-item>
			<up-form-item class="formItem" leftIcon="../../static/icons/信息.png" prop="code"
				leftIconStyle="color:'#ffffff'" labelWidth="80rpx">
				<input type="text" v-model="form.code" placeholder="请输入短信验证码" />
				<!-- <up-button type="plain" text="获取验证码"></up-button> -->
				<up-button v-if="!iscode" @click="subCode" style="width: 200rpx;height: 50rpx;font-weight: 700;"
					type="primary" :plain="true" size="mini" text="获取验证码"></up-button>
				<up-button v-else style="width: 250rpx;height: 50rpx;font-weight: 700;" type="primary" :plain="true"
					size="mini" :disabled="true" :text="timer+'秒后重发...'"></up-button>
			</up-form-item>
			<up-form-item leftIcon="../../static/icons/password.png" prop="password" labelWidth="80rpx">
				<!-- <up-input v-model="form.password" placeholder="输入密码"></up-input> -->
				<input type="password" v-model="form.password" placeholder="请输入3-8位密码" />
			</up-form-item>
			<up-form-item leftIcon="../../static/icons/password.png" prop="password1" labelWidth="80rpx">
				<!-- <up-input v-model="form.password" placeholder=""></up-input> -->
				<input type="password" v-model="form.password1" placeholder="请在次确认密码" />
			</up-form-item>
		</up-form>

		<up-button class="sub" type="primary" text="注册" @click="submit()"></up-button>
		<!-- 提示框 -->
		<up-notify ref="uNotifyRef" :message="message"></up-notify>
	</view>


</template>

<script setup>
	import {
		ref
	} from 'vue';
	let uNotifyRef = ref()
	let message = ref('')
	let formRef = ref()
	let form = ref({
		phone: '',
		code: '',
		password: '',
		password1: ''
	})
	let timer = ref(20)
	let iscode = ref(false)
	let rules = {
		'phone': [{
				require: true,
				type: 'string',
				message: '请输入手机号',

				validator: (rule, value, callback) => {
					if (value) {
						return true
					} else {
						return callback('请输入手机号')
					}
				},
				trigger: ['blur']
			},
			{
				// 	// 自定义验证函数，见上说明
				validator: (rule, value, callback) => {
					// 上面有说，返回true表示校验通过，返回false表示不通过
					// uni.$u.test.mobile()就是返回true或者false的
					return uni.$u.test.mobile(value);
				},
				message: '手机号码不正确',
				// 	// 触发器可以同时用blur和change
				// trigger: ['blur'],
			},
		],
		'code': {
			type: 'string',
			validator: (rule, value, callback) => {
				if (!value) {
					return callback('请输入验证码')
				}
				return callback()
			}
		},
		'password': {
			type: 'string',
			// message: '请输入3到8位密码',
			// trigger: ['blur'],
			validator: (rule, value, callback) => {
				if (!value) {
					return callback('请输入密码')
				}
				if (value.length < 3 || value.length > 8) {
					return callback('密码在3到8位字符')
				}
				callback()
			},
		},
		'password1': {
			type: 'string',
			// message: '请输入3到8位密码',
			// trigger: ['blur'],
			validator: (rule, value, callback) => {
				if (value !== form.value.password) {
					return callback('两次密码不一致')
				}
				if (!value) {
					return callback('请输入密码')
				}
				if (value.length < 3 || value.length > 8) {
					return callback('密码在3到8位字符')
				}

				callback()
			},
		},
	}
	// 发送验证码
	function subCode() {
		let reg = /^1[3-9]\d{8}$/
		if (form.value.phone == '') {
			uNotifyRef.value.show({
				top: 10,
				type: 'warning',
				color: '#ffffff',
				// bgColor: '#e8e8e8',  
				message: '请输入手机号',
				duration: 1000 * 3,
				fontSize: 20,
				safeAreaInsetTop: true
			})
			return
		}
		if (!reg.test(form.value.phone)) {
			uNotifyRef.value.show({
				top: 10,
				type: 'warning',
				color: '#ffffff',
				// bgColor: '#e8e8e8',  
				message: '手机号格式不正确',
				duration: 1000 * 3,
				fontSize: 20,
				safeAreaInsetTop: true
			})
			return
		}

		iscode.value = true
		let interval = setInterval(() => {
			timer.value--
			if (timer.value == 0) {
				clearInterval(interval)
				iscode.value = false
			}
		}, 1000)


	}

	function submit() {
		formRef.value.validate((val) => {
			console.log(val);
		})
	}
</script>

<style lang="scss">
	.wapper {
		// width: 100vw;
		height:calc( 100vh - 93rpx);
		border-top: 4rpx solid #e0e0e0;
		padding:0 60rpx;
		background-color: rgb(245, 245, 245);

	}

	.user-icon {
		text-align: center;
		margin-top: 130rpx;

		image {
			height: 100rpx;
			width: 100rpx;
		}
	}

	.u-form {
		box-shadow: 0 0 6rpx 6rpx #e0e0e0;
		margin-top: 100rpx;
		padding: 50rpx;

		// .sub-code{
		// 	width: 200rpx;
		// 	font-size: 18rpx;
		// 	color: rgb(60, 156, 255);
		// 	border-color: rgb(60, 156, 255);
		// }
		input {
			font-size: 28rpx;
		}


	}

	.sub {
		margin-top: 70rpx;
		border-radius: 70rpx;
	}
</style>